import Reac, { useEffect } from 'react'
import { Button, Checkbox, List } from 'antd'
import store from './store'
import { useState } from 'react'
import { getTodolist, delTodolist } from '../api/http'
//createStore的返回值 === store容器


//3.组件获取状态 store.getStore()===reducer函数
//console.log(store.getState);


export default function Listcom() {

  //获取数据
  let obj = store.getState()

  //创建一个状态 为了让状态更新 视图更新
  let [todolist, setTodolist] = useState(store.getState().todolist)

  //在初始的生命周期中 执行dispatch 先处理异步
  //redux-thunk允许action对象是个函数:在函数内先处理异步 再去执行dispatch发送action通知redcer修改状态
  useEffect(() => {
    store.dispatch(async () => {
      //1.执行异步 得到异步 数据
      let res = await getTodolist()
      console.log(res);
      //2.再去执行一次dispatch
      store.dispatch({
        type: 'get_list',
        payload: res //异步得到的数据 给reducer修改仓库中的todolist
      })
    })
  }, [])

  //redux数据变化了 但是组件不更新?
  //rendux是个独立的插件 数据变化了 组件需要使用subscribe开启监听
  //监听redux数据变化了 组件更新自己

  //5.组件监听状态:
  //在初始周期中开启redux监听 当redux数据变化了 这个函数就会执行
  useEffect(() => {
    store.subscribe(() => {
      //更新视图:修改状态 新的值获取一次redux的todolist
      setTodolist(store.getState().todolist)
    })
  }, [])


  return (
    <div style={{ border: '1px solid #ccc', padding: '10px', margin: 10 }}>

      <List
        itemLayout="horizontal"
        dataSource={todolist}
        renderItem={(item, index) => (
          <List.Item actions={[<Button onClick={() => {
            store.dispatch(async () => {
               await delTodolist(item.id)
              //删除数据
              store.dispatch({
                type: 'del_list',
                payload: item.id
              })
            })

          }}>删除</Button>]}>
            <List.Item.Meta
              title={item.title}
              avatar={<Checkbox
                checked={item.sed} onChange={() => {

                }} />} />
          </List.Item>
        )}
      />
    </div>
  )
}
